import { create } from "domain";
import { FC, useEffect, useRef,forwardRef,createRef } from "react";
// 函数组件不能直接使用Ref来直接引用的
// forwodRef(函数组件)可以用于传递Ref,也可以让组件暴露方法给父组件
// ts类型，forwardRef<ref类型，props类型
type h=HTMLInputElement | null
type p ={
    age:number
}

// 2.创建一个组件，并且使用forwardRef包裹该组件
const Child=forwardRef<h,p>((props,ref)=>{
    return(
        <fieldset>
            <legend>Child</legend>
            {/* 4.接收到父组件传递的Ref */}
            <h1 ref={ref}>一个子组件</h1>
        </fieldset>
    )
})

const ForwardRef:FC<any>=()=>{
    let ipt =useRef<HTMLInputElement>(null)
    // 1.要传递的ref
    let c=useRef<h>(null)
    useEffect(()=>{
        console.log(ipt);
        console.log(c.current!.style.color='deeppink');
        
    })
    return(
        <fieldset>
            <legend>ForwardRef</legend>
            <input type="text" ref={ipt}/>
            {/* 3.展示组件，并且写上ref */}
            <Child ref={c} age={30}/>
        </fieldset>
    )
}

export default ForwardRef